<template>
  <div class="foldItem">
    <Card class="card">
      <div @click="openThis">
      <floder-node  class="fileType" :info="folderinfo"></floder-node>
      <Button type="text">{{folderinfo.fname||folderinfo.ename}}</Button>
      </div>
      <Dropdown class="fileMenu" @on-click="reThis">
          <Button type="text">
            <Icon type="navicon-round"></Icon>
          </Button>
        <DropdownMenu slot="list">
            <DropdownItem name="1">重命名</DropdownItem>
            <DropdownItem name="2">删除</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    </Card>
    <Modal
        v-model="reData.isOpen"
        @on-ok="reName"
        title="重命名">
        重命名
      <Input v-model="reData.nameTmp" autofocus @on-enter="reName"></Input>
    </Modal>
  </div>
</template>
<script>
let icon = {
  folder: require("#/img/floder.png"),
  table: require("#/img/excel.png"),
  other: require("#/img/excel.png")
};
export default {
  name: "foldItem",
  data() {
    return {
      reData: {
        isOpen: false,
        nameTmp: null,
        label: "123"
      }
    };
  },
  props: ["folderinfo", "numberList"],
  methods: {
    openThis() {
      switch (this.folderinfo.type) {
        case "folder":
          this.$router.push({
            name: "folder",
            params: {
              fid: this.folderinfo.fid
            }
          });
          break;
        case "table":
          this.$router.push({
            name: "page",
            params: {
              eid: this.folderinfo.eid
            }
          });
          break;
        default:
          break;
      }
    },
    reThis(code) {
      switch (code) {
        case "1":
          this.reData.isOpen = true;
          this.reData.nameTmp = this.folderinfo.fname || this.folderinfo.ename;
          break;
        case "2":
          if (window.confirm("删除后不能恢复,确定删除该项目?")) {
            switch (this.folderinfo.type) {
              case "folder":
                this.$http({
                  url: "excel_deleteFolders",
                  params: {
                    "folders.fid": this.folderinfo.fid
                  }
                })
                  .then(re => {
                    this.$Message.success("删除");
                  })
                  .catch(re => {
                    this.$Message.error("修改失败");
                  });
                break;
              case "table":
                this.$http({
                  url: "excel_deleteExcel",
                  params: {
                    "excel.eid": this.folderinfo.eid
                  }
                })
                  .then(re => {
                    this.$Message.success("修改成功");
                  })
                  .catch(re => {
                    this.$Message.error("修改失败");
                  });
                break;
              default:
                break;
            }
            this.$emit("on-remove", this.numberList);
          } else {
          }
          break;
        default:
          break;
      }
    },
    reName(x) {
      switch (this.folderinfo.type) {
        case "folder":
          this.$http({
            url: "excel_updateFolders",
            params: {
              "folders.fid": this.folderinfo.fid,
              "folders.fname": this.reData.nameTmp
            }
          })
            .then(re => {
              this.folderinfo.fname = re.body.fname;
              this.$Message.success("修改成功");
            })
            .catch(re => {
              this.$Message.error("修改失败");
            });
          break;
        case "table":
          this.$http({
            url: "excel_updateExcel",
            params: {
              "excel.eid": this.folderinfo.eid,
              "excel.ename": this.reData.nameTmp
            }
          })
            .then(re => {
              this.folderinfo.ename = re.body.ename;
              this.$Message.success("修改成功");
            })
            .catch(re => {
              this.$Message.error("修改失败");
            });
          break;
        default:
          break;
      }
      // this.folderinfo.name = this.reData.nameTmp;
    }
  },
  components: {
    "floder-node": {
      render(h) {
        let info = this.info;
        return h("div", [
          h("img", {
            attrs: {
              src: icon[info.icon] ? icon[info.icon] : icon["other"]
            },
            style: {
              height: "50px"
            }
          })
        ]);
      },
      props: ["info"]
    }
  }
};
</script>
<style lang="less" scoped>
.foldItem {
  .card {
    text-align: center;
    .fileType {
      width: 50px;
      margin: 4px auto;
    }
    .fileMenu {
      position: absolute;
      top: 0;
      right: 0;
      opacity: 0;
      transition: all 1s;
    }
  }
  &.active,
  &:hover {
    cursor: pointer;
    // border: 1px solid #000;
    box-shadow: 0px 0px 1px rgb(14, 253, 134);
    // border-radius: 2px;
    .fileMenu {
      opacity: 1;
    }
  }
}
</style>

